<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
			/* 
			 1、提供样式
			 [v-cloak]{
			 	display: none;
			 }
			 2、在标签中添加 v-cloak
			 原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换后在现实最终的结果
			 */
		</style>
	</head>
	<body>
		<div class="app">
			<p v-cloak>+++++++{{message}}</p> <!-- v-cloak 能够解决插值表达式防止闪烁-->
			<p v-text="message">+++++</p>
			<!-- 显示原始信息，跳过解析 -->
			<p v-pre>{{message}}</p>
			<!-- 如果现实的信息后需不需要修改，可以使用v-once，可以提高性能 -->
			<p v-once>{{message}}</p>
			<!-- 和插值表达式相比 默认v-text没有闪烁问题  
			但是会覆盖元素中原本的内容
			-->
			<div>{{message2}}</div>
			<div v-text="message2"></div><!-- 这两个标签都没有渲染成html -->
			<div v-html="message2"></div><!-- 用来插入内容html的 -->
			<!-- v-bind用于绑定属性的指令  v-on用于绑定事件-->
			<input type="button" value="按钮" v-bind:title="mytitle + '123'" v-on:mouseover="show2"></input>
			<!--v-bind可以简写为 ：  -->
			<!--v-on可以简写为 @  -->
			<input type="button" value="按钮" :title="mytitle + '123'" v-on:click="show2"></input>
		</div>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'.app',
				data:{
					message:'123',
					message2:'<h1>哈哈，我是一个H1<h1>' ,
					mytitle:'这是一个自定义的title'
				},
				methods:{//定义Vue实例所有可用方法
					show2:function(){
						alert('hello');
					}
				}
			})
		</script>
		
	</body>
</html>
